<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>千锋选课系统</title>
    <style type="text/css">
        select {
            width: 200px;
            height: 350px;
        }

        input {
            position: absolute;
            width: 100px;
            margin-left: -150px;
        }
    </style>
</head>

<body>
    <center>
        <fieldset style="width:800px;">
            <legend>请选择课程</legend>
            <br>
            <select id="leftSelect" multiple="multiple" size="23" style="margin-right:200px;" ondblclick="right();">
                <option>职场新动力英语1</option>
                <option>职场新动力英语2</option>
                <option>职场新动力英语3</option>
                <option>职场新动力数学1</option>
                <option>职场新动力数学2</option>
                <option>职场新动力数学3</option>
                <option>计算机基础</option>
                <option>网页设计</option>
                <option>C语言程序设计</option>
                <option>vue</option>
                <option>react</option>
                <option>uni-app</option>
                <option>node.js/CMS案例</option>
                <option>数据结构与算法</option>
                <option>小程序/计算机视觉/Mybatis</option>
                <option>springMVC/SSH/WebService</option>
                <option>项目实训1</option>
                <option>项目实训2</option>
                <option>项目实训3</option
            </select>
                <input type="button" value="→ 添加 →" style="margin-top:50px;" onclick="right();">
                <input type="button" value="← 删除 ←" style="margin-top:100px;" onclick="left();">
                <input type="button" value="↑ 上移 ↑" style="margin-top:150px;" onclick="up();">
                <input type="button" value="↓ 下移 ↓" style="margin-top:200px;" onclick="down();">
                <input type="button" value="取消左选" style="margin-top:250px;" onclick="cancelLeft()	;">
                <input type="button" value="取消右选" style="margin-top:300px;" onclick="cancelRight();">

                <select id="rightSelect" multiple="multiple" size="23" ondblclick="left();" onclick="cancelLeft();">
                </select>
                <br>
                <br>
        </fieldset>
    </center>

    <script>
        // 知识点铺垫  

        // 判断select 中多少个option  
        // var leftSelect = document.getElementById('leftSelect');
        // // alert(leftSelect.options.length); // 固定用法 判断select下有多少个option
        // // 选项是否被选中
        // alert(leftSelect.options[0].selected);
        // alert(leftSelect.options[1].selected);
        var leftSelect = document.getElementById('leftSelect');
        var rightSelect = document.getElementById('rightSelect');
        // 父节点.appendChild(子节点)
        // function right(){
        //     // alert(66)
        //     //判断左边哪些被选中 
        //     for(var i=0;i<leftSelect.options.length;i++){
        //         if(leftSelect.options[i].selected){
        //             rightSelect.appendChild(leftSelect.options[i]);
        //             i--;
        //         }
        //     }
        // }

        function right(){
            // alert(66)
            //判断左边哪些被选中 
            for(var i=0;i<leftSelect.options.length;i++){
                if(leftSelect.options[i].selected){
                    var newcode = leftSelect.options[i].cloneNode(true);
                    rightSelect.appendChild(newcode);
                }
            }
        }


        function left(){
            // alert(66)
            //判断左边哪些被选中 
            for(var i=0;i<rightSelect.options.length;i++){
                if(rightSelect.options[i].selected){
                    var newcode = rightSelect.options[i].cloneNode(true);
                    leftSelect.appendChild(newcode);
                }
            }
        }


        function up(){
            // 插入到前面一个元素的前面  
            // previousElementSibling  同级前面一个元素
            // 父节点.insertBefore(子节点,谁的前面)

            //首先确定哪个被选中 

            // 获取它同级的前一个元素  

            // 调用insertBefore

            for(var i=0;i<leftSelect.options.length;i++){
                if(leftSelect.options[i].selected){
                    if(i==0){
                        return;
                    }
                    leftSelect.insertBefore(leftSelect.options[i],leftSelect.options[i].previousElementSibling);
                }
            }

        }

        function down(){
            // 拿到选中元素的后一个 
            // 把后一个元素 插入 选中元素的前面 
            for(var i=0;i<leftSelect.options.length;i++){
                if(leftSelect.options[i].selected){
                    if(i == leftSelect.options.length-1){
                        return
                    }
                    leftSelect.insertBefore(leftSelect.options[i].nextElementSibling,leftSelect.options[i]);
                    break;
                }
            }
        }

    </script>
</body>

</html>